<template>
    <div class="nav-wrapper">
        <div class="nav-container">
            <div class="nav-item" :class="[index === 2 ? 'hide' : '']" @click="jumpTo(item.path)" v-for="(item, index) in navList" :key="index">
                <image :src="imgPath(item.img + (nowPath === item.path ? '_active' : '') + '.png')" class="nav-img"/>
                <text class="nav-text" :class="[nowPath === item.path ? 'col_fecb01' : '']">{{item.name}}</text>
            </div>
        </div>
        <div class="new_bazaar" @click="jumpTo('/market')">
            <image class="new_img" :src="imgPath(nowPath === '/market' ? 'new_bazaar_active.png' : 'new_bazaar.png')"></image>
            <text class="nav-text" :class="[nowPath === '/market' ? 'col_fecb01' : '']">新市集</text>
        </div>
    </div>
</template>

<script>
const modal = weex.requireModule('modal')
const storage = weex.requireModule('storage')

export default {
  name: 'navBottom',
  data () {
    return {
      userId: '', // 用户ID
      nowPath: '', // 当前路由
      navList: [
        {
          img: 'home',
          name: '首页',
          path: '/home'
        },
        {
          img: 'shopping',
          name: '商城',
          path: '/store'
        },
        {
          img: 'new_bazaar',
          name: '新市集',
          path: '/market'
        },
        {
          img: 'fan',
          name: '范堂',
          path: '/fanhall'
        },
        {
          img: 'my',
          name: '我的',
          path: '/mine/personalCenter'
        }
      ]
    }
  },
  created () {
    const that = this
    that.nowPath = that.$route.path
    storage.getItem('userId', event => {
      if (event.result === 'success') {
        that.userId = event.data
      }
    })
  },
  methods: {
    jumpTo (path) {
      const that = this
      let toPath = path
      if (path === '/mine/personalCenter') {
        if (!that.userId) {
          toPath = '/login'
          modal.toast({
            message: '用户未登录'
          })
        }
      }
      that.$router.push(toPath)
    }
  }
}
</script>

<style scoped>
    .hide {
        opacity: 0;
    }
    .col_fecb01 {
        color: #fecb01;
    }
    .nav-wrapper {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        padding-top: 24px;
    }
    .nav-container{
        height: 98px;
        padding-top: 8px;
        flex-direction: row;
        justify-content: space-around;
        background-color: rgb(43,48,64);
    }
    .nav-item {
        align-items: center;
    }
    .nav-img{
        width: 42px;
        height: 42px;
    }
    .nav-text{
        margin-top: 8px;
        font-size: 24px;
        color: rgb(206,206,206);
    }
    .new_bazaar {
        position: absolute;
        top: 0;
        left: 317px;
        width: 116px;
        height: 116px;
        background-color: rgb(72,79,99);
        border-radius: 58px;
        align-items: center;
    }
    .new_img {
        width: 42px;
        height: 42px;
        margin-top: 14px;
    }
</style>
